<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { computed, onMounted, ref, shallowRef } from "vue";
import type { DefaultOptionType } from "ant-design-vue/es/vc-select/Select";

const types = shallowRef<Record<string, string>>({});
const extensions = shallowRef<Record<string, string[]>>({});

const typeOptions = shallowRef<DefaultOptionType[]>([]);
const extOptions = shallowRef<DefaultOptionType[]>([]);

const type = ref<string>();
const ext = ref<string>();

const typeResult = computed(() => type.value && types.value[type.value]);
const extResult = computed(() => (ext.value ? extensions.value[ext.value] : []));

onMounted(async () => {
  const typesValue: Record<string, string> = await native.ipc.invokeNode("mime-types.types");
  const extensionsValue: Record<string, string[]> = await native.ipc.invokeNode("mime-types.extensions");

  types.value = typesValue;
  extensions.value = extensionsValue;
  typeOptions.value = Object.keys(typesValue).map(it => ({ value: it }));
  extOptions.value = Object.keys(extensionsValue).map(it => ({ value: it }));
});
</script>

<template>
  <tool-view title="MimeType查询" description="根据文件类型查询MimeType或根据MimeType查询文件类型">
    <div class="pv-20 full-view flex-center">
      <div class="w-80p">
        <div class="mb-10">按文件类型查询MimeType</div>
        <a-select v-model:value="type" :options="typeOptions" show-search class="w-full" size="large" />
        <div class="mt-10 h-25 select-text">
          <a-tag v-if="typeResult" color="var(--color-success)">{{ typeResult }}</a-tag>
        </div>

        <div class="mb-10 mt-30">按MimeType查询文件类型</div>
        <a-select v-model:value="ext" :options="extOptions" show-search class="w-full" size="large" />
        <div class="mt-10 h-25 select-text">
          <template v-for="it in extResult" :key="it">
            <a-tag color="var(--color-success)">{{ it }}</a-tag>
          </template>
        </div>
      </div>
    </div>
  </tool-view>
</template>

<style scoped lang="less"></style>
